<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sian</title>
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Arial, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
            color: #fff;
            overflow-x: hidden;
        }

        /* 导航栏 */
       .navbar {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            padding: 1rem 0;
            position: fixed;
            width: 100%;
            z-index: 1000;
            top: 0;
        }

       .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

       .nav-logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: #00f3ff;
            text-shadow: 0 0 15px rgba(0, 245, 255, 0.5);
        }

       .nav-links {
            display: flex;
            gap: 2rem;
        }

       .nav-links a {
            color: #fff;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
        }

       .nav-links a:hover {
            color: #00f3ff;
            transform: translateY(-3px);
        }

        /* 主内容区 */
       .main-container {
            max-width: 1200px;
            margin: 150px auto 50px;
            padding: 0 2rem;
        }

        /* 头像卡片 */
       .profile-card {
            background: linear-gradient(145deg, #2c2c2c, #1a1a1a);
            padding: 2rem;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease;
            margin-bottom: 2rem;
        }

       .profile-card:hover {
            transform: translateY(-5px);
        }

       .avatar {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            margin: 0 auto 1.5rem;
            border: 3px solid #00f3ff;
        }

       .username {
            font-size: 2.2rem;
            margin-bottom: 1rem;
            color: #00f3ff;
            font-weight: 700;
        }

       .bio {
            font-size: 1.1rem;
            line-height: 1.6;
            color: #ddd;
            max-width: 600px;
            margin: 0 auto 2rem;
        }

        /* 社交按钮组 */
       .social-buttons {
            display: flex;
            gap: 1.5rem;
            justify-content: center;
            margin-bottom: 2rem;
            flex-wrap: nowrap;
        }

       .social-btn {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            font-size: 1.5rem;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            flex-shrink: 0;
        }

       .social-btn:hover {
            transform: scale(1.1);
            background: rgba(255, 255, 255, 0.15);
        }

        @media (max-width: 300px) {
           .social-btn {
                width: 45px;
                height: 45px;
                font-size: 1.3rem;
            }

           .social-buttons {
                gap: 1rem;
            }
        }

        /* 弹窗样式 */
       .modal {
            display: none;
            position: fixed;
            z-index: 1001;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(5px);
            justify-content: center;
            align-items: center;
        }

       .modal-content {
            background: #1a1a1a;
            padding: 2rem;
            border-radius: 15px;
            width: 90%;
            max-width: 400px;
            text-align: center;
            position: relative;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

       .modal-header {
            font-size: 1.3rem;
            color: #00f3ff;
            margin-bottom: 1rem;
        }

       .modal-body {
            color: #ddd;
            font-size: 1rem;
            margin-bottom: 1.5rem;
        }

       .copy-btn {
            background: #00f3ff;
            color: #1a1a1a;
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

       .copy-btn:hover {
            background: #00c6e5;
            transform: translateY(-2px);
        }

        /* 加入群组按钮 */
       .join-btn {
            display: block;
            padding: 1rem 2rem;
            background: linear-gradient(45deg, #ff6b6b, #ff8e53);
            color: #fff;
            text-decoration: none;
            border-radius: 30px;
            font-weight: 600;
            transition: all 0.3s ease;
            margin: 1rem auto;
            width: 80%;
        }

       .join-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3);
        }

        /* 跑马灯公告 */
       .announcement {
            position: fixed;
            width: 100%;
            top: 15%;
            z-index: 999;
        }

        /* 版权栏 */
       .footer {
            background: rgba(0, 0, 0, 0.1);
            padding: 2rem;
            text-align: center;
            margin-top: 3rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        @media (max-width: 768px) {
           .nav-container {
                flex-direction: column;
                text-align: center;
            }
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-logo">Sian的小主页</div>
            <div class="nav-links">
                <a href=" "></a>
                <a href=" ">好久不见~感谢您的访问</a>
                <a href=" "></a>
            </div>
        </div>
    </nav>
    <!-- 跑马灯 -->
    <div class="announcement">
        <!-- 公告：动态变量 -->
        <marquee behavior="scroll" direction="left" id="gonggaoMarquee"></marquee>
    </div>
    <!-- 主内容区 -->
    <div class="main-container">
        <!-- 头像卡片 -->
        <div class="profile-card">
            <!-- 头像：动态变量 -->
            <img src="" alt="头像" class="avatar" id="touxiangImg">
            <!-- 昵称：动态变量 -->
            <h1 class="username" id="nichengH1"></h1>
            <!-- 简介：动态变量 -->
            <p class="bio" id="jianjieP"></p>
        </div>
        <!-- 社交按钮 -->
        <div class="social-buttons">
            <!-- Wechat：动态账号 -->
            <button class="social-btn" data-platform="WeChat" id="sjwxBtn">
                <i class="fab fa-weixin"></i>
            </button>
            <!-- QQ：动态账号 -->
            <button class="social-btn" data-platform="QQ" id="sjqqQBtn">
                <i class="fab fa-qq"></i>
            </button>
            <!-- 邮箱：动态账号 -->
            <button class="social-btn" data-platform="邮箱" id="sjyxBtn">
                <i class="fas fa-envelope"></i>
            </button>
            <!-- TG：动态账号 -->
            <button class="social-btn" data-platform="Tg" id="sjtgBtn">
                <i class="fab fa-telegram"></i>
            </button>
        </div>
        <div style="text-align: center;">
            <!-- 卡片1：动态文字和链接 -->
            <a href="#" target="_blank" class="join-btn" id="kpwzBtn"></a>
            <!-- 卡片2：动态文字和链接 -->
            <a href="#" target="_blank" class="join-btn" id="kpwzzBtn"></a>
            <!-- 卡片3：动态文字和链接 -->
            <a href="#" target="_blank" class="join-btn" id="kpwzzzBtn"></a>
        </div>
    </div>
    <!-- 版权栏 -->
    <footer class="footer">
        <p>© 2025 Sian. 保留所有权利.</p>
        <p>如果生活繁琐--不妨看看世界</p>
    </footer>
    <!-- 弹窗模板 -->
    <div class="modal" id="socialModal">
        <div class="modal-content">
            <div class="modal-header"></div>
            <div class="modal-body">
                <p id="modalAccount"></p>
                <button class="copy-btn" onclick="copyToClipboard()">复制信息</button>
            </div>
        </div>
    </div>
    <script>
        // 定义变量（与JSON数据键名对应）
        var gonggao = "";
        var touxiang = "";
        var nicheng = "";
        var jianjie = "";
        var sjqqQ = "";
        var sjwx = "";
        var sjyx = "";
        var sjtg = "";
        var kpwz = "";
        var kplj = "";
        var kpwzz = "";
        var kpljj = "";
        var kpwzzz = "";
        var kpljjj = "";

        document.addEventListener('DOMContentLoaded', function () {
            fetch('data.csv')
               .then(response => response.json())
               .then(data => {
                    // 变量赋值
                    gonggao = data.公告;
                    touxiang = data.头像链接;
                    nicheng = data.昵称;
                    jianjie = data.简介;
                    sjqqQ = data.QQ;
                    sjwx = data.WeChat;
                    sjyx = data.邮箱;
                    sjtg = data.TG;
                    kpwz = data.卡片1文字;
                    kplj = data.卡片1地址;
                    kpwzz = data.卡片2文字;
                    kpljj = data.卡片2地址;
                    kpwzzz = data.卡片3文字;
                    kpljjj = data.卡片3地址;

                    // 填充公告跑马灯
                    const gonggaoMarquee = document.getElementById('gonggaoMarquee');
                    if (gonggaoMarquee) {
                        gonggaoMarquee.textContent = gonggao;
                    }

                    // 填充头像
                    const touxiangImg = document.getElementById('touxiangImg');
                    if (touxiangImg) {
                        touxiangImg.src = touxiang;
                    }

                    // 填充昵称
                    const nichengH1 = document.getElementById('nichengH1');
                    if (nichengH1) {
                        nichengH1.textContent = nicheng;
                    }

                    // 填充简介（支持<br>换行）
                    const jianjieP = document.getElementById('jianjieP');
                    if (jianjieP) {
                        jianjieP.innerHTML = jianjie;
                    }

                    // 填充社交按钮账号
                    const sjwxBtn = document.getElementById('sjwxBtn');
                    if (sjwxBtn) {
                        sjwxBtn.dataset.account = sjwx;
                    }

                    const sjqqQBtn = document.getElementById('sjqqQBtn');
                    if (sjqqQBtn) {
                        sjqqQBtn.dataset.account = sjqqQ;
                    }

                    const sjyxBtn = document.getElementById('sjyxBtn');
                    if (sjyxBtn) {
                        sjyxBtn.dataset.account = sjyx;
                    }

                    const sjtgBtn = document.getElementById('sjtgBtn');
                    if (sjtgBtn) {
                        sjtgBtn.dataset.account = sjtg;
                    }

                    // 填充卡片按钮（文字+链接）
                    const kpwzBtn = document.getElementById('kpwzBtn');
                    if (kpwzBtn) {
                        kpwzBtn.textContent = kpwz;
                        kpwzBtn.href = kplj;
                    }

                    const kpwzzBtn = document.getElementById('kpwzzBtn');
                    if (kpwzzBtn) {
                        kpwzzBtn.textContent = kpwzz;
                        kpwzzBtn.href = kpljj;
                    }

                    const kpwzzzBtn = document.getElementById('kpwzzzBtn');
                    if (kpwzzzBtn) {
                        kpwzzzBtn.textContent = kpwzzz;
                        kpwzzzBtn.href = kpljjj;
                    }
                })
               .catch(error => console.error('数据加载失败:', error));
        });

        // 社交按钮弹窗逻辑
        document.querySelectorAll('.social-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                let target = e.target;
                if (!target.classList.contains('social-btn')) {
                    target = target.closest('.social-btn');
                }
                const platform = target.dataset.platform;
                const account = target.dataset.account;
                if (platform && account) {
                    document.querySelector('.modal-header').textContent = platform;
                    document.getElementById('modalAccount').textContent = account;
                    document.getElementById('socialModal').style.display = 'flex';
                }
            });
        });

        // 复制功能
        function copyToClipboard() {
            const text = document.getElementById('modalAccount').textContent;
            navigator.clipboard.writeText(text)
               .then(() => {
                    document.getElementById('socialModal').style.display = 'none';
                })
               .catch((error) => {
                    console.error('复制失败:', error);
                });
        }

        // 关闭弹窗
        window.addEventListener('click', (e) => {
            if (e.target === document.getElementById('socialModal')) {
                document.getElementById('socialModal').style.display = 'none';
            }
        });
    </script>
</body>

</html>
